import { computed, ref } from "vue";
import { PrimaryTableCol, TableRowData } from "tdesign-vue-next";
import { FormRowType, TDFormType } from "@/libs/components/dynamicForm";
import { useResettableRef } from "@/libs/hooks";

export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  {
    colKey: "time",
    title: "获奖时间",
    width: "210",
    ellipsis: true,
    align: "center",
  },
  {
    colKey: "type",
    title: "赛事类型",
    width: "210",
    ellipsis: true,
    align: "center",
  },
  {
    colKey: "name",
    title: "获奖名称",
    width: "210",
    ellipsis: true,
    align: "center",
  },
  {
    align: "center",
    fixed: "right",
    width: "210",
    colKey: "op",
    title: "操作",
  },
];
export const formRef = ref(null);

export const formAttribute = ref<TDFormType>({
  disabled: false,
  labelWidth: "120px",
});

export const [formData, resetFormData] = useResettableRef({
  userName: "张学员",
  phone: "134-1234-5678",
  email: "14273297@163.com",
  card: "134123456788635299",
  signature: "砥砺前行，不负韶华，以梦为马，不负青春。",
});

export const formItems = computed<FormRowType[]>(() => [
  {
    children: [
      {
        name: "userName",
        component: "Input",
        formItemAttribute: {
          label: "真实姓名",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "phone",
        component: "Input",
        formItemAttribute: {
          label: "手机号码",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "email",
        component: "Input",
        formItemAttribute: {
          label: "电子邮箱",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "card",
        component: "Input",
        formItemAttribute: {
          label: "身份证号",
        },
      },
    ],
  },
]);
